<template>
    <tiny-grid ref="voTable"  :data="tableData.data" :page="data.custPager">
        <tiny-grid-column type="index" width="60"></tiny-grid-column>
      <tiny-grid-column type="selection" width="50"></tiny-grid-column>
      <tiny-grid-column
        field="dictName"
        show-overflow
        title="名称"
        :editor="{ component: 'input', autoselect: true }"
      ></tiny-grid-column>
      <tiny-grid-column field="dictCode" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
      <tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
      <tiny-grid-column
        field="introduction"
        title="公司简介"
        :editor="{ component: 'input', autoselect: true }"
        show-overflow
      ></tiny-grid-column>

    </tiny-grid>

    <tiny-pager v-if="props.isPage"
      :current-page="data.custPager.currentPage"
      :page-size="data.custPager.pageSize"
      :total="data.custPager.total"
      :page-sizes="[5, 10, 20, 50]"
      @current-change="currentChange"
      @size-change="sizeChange"
      layout="total, sizes, prev, pager, next, jumper"
    ></tiny-pager>
</template>

<script setup>
import { ref,toRef,toRefs, reactive, onBeforeMount, onMounted , getCurrentInstance, computed  } from 'vue';
import { Grid as TinyGrid, GridColumn as TinyGridColumn,TinyGridToolbar,TinyPager  } from '@opentiny/vue'

const props = defineProps({
    data:{Array,default:[]},
    isPage:{Boolean,default:true},
    serverPage:{Boolean,default:true},//是否服务端分页
    msg:''
}) 
const data = reactive({
    tableData:[],
    data:{},
    custPager:{
        currentPage: 1,
        pageSize: 5,
        total: 0
    }
})
data.data = toRef(props, 'data');
const tableData =  computed(() => {
  if(Array.isArray(data.data)){
      tableData.data = data.data
     if(props.isPage){
        tableData.data = data.data.slice((data.custPager.currentPage - 1) * data.custPager.pageSize,
        data.custPager.currentPage * data.custPager.pageSize)
        data.custPager.pageSize=data.custPager.pageSize;
        data.custPager.total=data.data.length;
     }
    return tableData;
  }else{
     tableData.data=data.data.content
     let page = data.data.page;
     if(props.isPage){
        data.custPager.pageSize=page.size;
        data.custPager.total=page.totalElements;
     }
    return tableData;
  }
});

const currentChange=(value)=>{
    data.custPager.currentPage=value
    console.log("currentChange")
    //使用前端分页不再请求父页面
    if(props.serverPage){
        emits('fetchData')
    }else{
        //前端分页
        tableData.data = data.data.slice((data.custPager.currentPage - 1) * data.custPager.pagesize,
        data.custPager.currentPage * data.custPager.pagesize)
    }
}
const sizeChange=(value)=>{
    data.custPager.pageSize=value
    console.log("sizeChange")
    //使用前端分页不再请求父页面
    if(props.serverPage){
        emits('fetchData')
    }else{
        //前端分页
        tableData.data = data.data.slice((data.custPager.currentPage - 1) * data.custPager.pagesize,
            data.custPager.currentPage * data.custPager.pagesize)

    }
}
const emits = defineEmits(['fetchData']);
const page = ()=>{
    return  data.custPager;
} 
const grid = ()=>{
   return voTable.value;
}
const voTable = ref(null);
defineExpose({
    grid,
    page
}
)

</script>


<style lang="scss" scoped>

</style>